<script setup>
import { getMenuListApi } from "../../../api/auth";
import { transListToTreeData } from "../../../utils/tree";
import { useButtonStatu } from "../../../hooks/menu";

// =============
const list = ref([]);
const buttonStatu = useButtonStatu();

const statusShow = ref(0);
// =============
// 获取数据转为树
onMounted(async () => {
  let res = await getMenuListApi();
  const menuList = res.data;
  const newMenuList = transListToTreeData(menuList, 0);
  list.value = newMenuList;
  console.log(list.value);
});

// 显示类型文字
const btStateList = (val) => {
  let res = buttonStatu.find((item) => item.value === val);
  return res ? res.label : "未知";
};
</script>
<template>
  <div style="margin: 20px">
    <el-card>
      <el-table :data="list" style="width: 100%; margin-bottom: 20px" row-key="id" border>
        <el-table-column prop="title" label="名称" />
        <el-table-column prop="path" label="路由地址" />
        <el-table-column prop="icon" label="图标" />
        <el-table-column prop="name" label="标识" />
        <el-table-column prop="type" label="类型">
          <template #default="{ row }">
            <el-tag :type="btStateList(row.type) === '按钮' ? 'success' : 'Brand'" disable-transitions color="Success">{{
              btStateList(row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="weight" label="权重" />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <el-switch v-model="row.status" size="small" active-text="显示" inactive-text="隐藏" />
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template #default="{ row }">
            <slot name="operation" :row="row">
              <el-button type="text">修改</el-button>
              <el-popconfirm title="是否确定删除">
                <template #reference>
                  <el-button type="text">删除</el-button>
                </template>
              </el-popconfirm>
            </slot>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<style scoped></style>
